import Snap from "@aibee/snapsvg";
import { Line } from "./component/Line";
import { STYLE_ENUM } from "./ENUM";
import { SnapTest } from "./SnapTest";
interface IVec2 {
  x: number;
  y: number;
}
export function test2(ctx: SnapTest) {
  /**
   *
   * 角色做坐标相对句初始化坐标的为原点
   *
   * ***/
  let rolev2: IVec2 = { x: 0, y: 0 };

  /**
   *
   * 是否绘制折线
   *
   * ***/
  let isPath: boolean = false;
  let theBall: any = undefined;
  /**
   *
   * 折线向量数组
   *
   * ***/
  let arrLinelist: Line[] = [];

  const isPathfn = (boolean: boolean) => {
    isPath = boolean;
  };
  let lineg: Snap.Paper;
  /**
   *
   * 执行角色运动函数
   *
   */
  const transtionform = (res: any, num: number) => {
    let v2 = JSON.parse(JSON.stringify(rolev2));
    if (isPath) drawThePath(v2, res);
    Snap.animate(
      [v2.x, v2.y],
      [res.x, res.y],
      function (resp: any) {
        // 绘制运动
        // ctx.characterTemplate.attr({
        //   transform: `translate( ${resp[0]}, ${resp[1]}) rotate(${num}deg) scale(1)`,
        // });
        // ctx.rolate.attr({
        //   transform: `translate( ${resp[0]}, ${resp[1]}) rotate(${num}deg) scale(1)`,
        // });
        ctx.pitch({ x: resp[0], y: resp[1] }, num);
        pitch(res);
        // 将最终运行坐标赋值给相对坐标
      },
      STYLE_ENUM.matrixnumber
    );
    //
  };
  // 绘制运动路径
  function drawThePath(start: any, end: any) {
    if (!lineg) {
      lineg = ctx.pathline.g();
    }
    const stxline = lineg?.line(start.x, start.y, end.x, end.y);
    const line = new Line(stxline, start, ctx);
    line.move(end, STYLE_ENUM.matrixnumber);
    line.afterfn(ctx.characterTemplate);
    arrLinelist.unshift(line);
    if (arrLinelist.length > 2) {
      const ele = arrLinelist.pop();
      ele!.remove(STYLE_ENUM.matrixnumber, (res: boolean) => {
        if (res) {
          const elew = arrLinelist[arrLinelist.length - 1];
          elew!.dottedline();
        }
      });
    }
  }
  /**
   *
   * 计算绘制路径
   *
   * **/
  function actionpath(type: number, awayhome: number) {
    let path: Array<number> = [];
    // [30, 10, 300, 10, 400, 150, 300, 290, 30, 290, 30, 10]

    switch (type) {
      case 1:
        if (awayhome == 1) {
          path = [30, 10, 300, 10, 300, 290, 30, 290, 30, 10];
        } else {
          path = [300, 10, 570, 10, 570, 290, 300, 290, 300, 290];
        }
        break;
      case 2:
        if (awayhome == 1) {
          path = [30, 10, 350, 10, 400, 150, 350, 290, 30, 290, 30, 10];
        } else {
          path = [250, 10, 570, 10, 570, 290, 250, 290, 200, 150, 250, 10];
        }
        break;
      case 3:
        if (awayhome == 1) {
          path = [30, 10, 400, 10, 450, 150, 400, 290, 30, 290, 30, 10];
        } else {
          path = [200, 10, 570, 10, 570, 290, 250, 290, 150, 150, 250, 10];
        }
        break;
      default:
        break;
    }
    return path;
  }

  function actionPathMove(type: number, awayhome: number, path: Array<number>) {
    if (type === 1) return [];
    let movePath: Array<number> = [];
    let stepNum: number = awayhome == 1 ? 25 : -25;
    movePath = path.map((p, i) => {
      let np: number;
      if (awayhome == 1) {
        np = [2, 4, 6, 8].includes(i) ? p + stepNum : p;
      } else {
        np = [0, 6, 8, 10].includes(i) ? p + stepNum : p;
      }
      return np;
    });
    return movePath;
  }
  /***
   *
   * ac,动画对象
   * type：执行动画
   * ****/
  function action({ type = 1, ac = {}, awayhome = 1 }): void {
    // if (!ac.value) return
    // switch (ac.value) {
    //     case 1:
    if (theBall) {
      ctx.pathline.after(ctx.characterTemplate);
      ctx.pitch(rolev2);
      theBall.remove();
    }
    let gradient: string = "";
    if (type == 2) {
      gradient =
        awayhome == 1 ? STYLE_ENUM.gradientHome : STYLE_ENUM.gradientAway;
    } else if (type == 1) {
      gradient =
        awayhome == 1 ? STYLE_ENUM.gradientHome : STYLE_ENUM.gradientAway;
    } else if (type == 3) {
      gradient =
        awayhome == 1
          ? STYLE_ENUM.dangerousGradientHome
          : STYLE_ENUM.dangerousGradientAway;
    }
    const curPath = actionpath(type, awayhome);
    theBallfn(type, curPath, gradient, awayhome);
    // }, STYLE_ENUM.matrixnumber);
    //     break;
    // case 2:
    // case 3:
    // case 4:
    // case 5:
    // case 6:
    // case 7:
    // case 8:
    //     break;

    // default:

    //     break;
    // }
  }
  // 绘制进攻
  function theBallfn(
    _type: number,
    path: Array<number>,
    gradient: string,
    _awayhome: number
  ) {
    theBall = ctx.pathline.g();
    const g = ctx.ctx.gradient(gradient);
    const as = theBall.polygon(path.join(","));
    if (_type !== 1) {
      // const animateDom = document.createElement("animate");
      // animateDom.setAttribute("attribute-name", "points");
      // animateDom.setAttribute("repeat-count", "indefinite");
      // animateDom.setAttribute("dur", "1.5s");
      // animateDom.setAttribute("begin", "0s");

      const animateDom = document.getElementById("self-ani");
      // animateDom.cloneNode(document.getElementById("self-ani"))
      animateDom?.setAttribute("from", path.join(","));
      const movePath = actionPathMove(_type, _awayhome, path);
      animateDom?.setAttribute("to", movePath.join(","));
      as.append(animateDom);
    }
    as.attr({
      fill: g,
    });
    as.after(ctx.characterTemplate);
    if (!lineg) {
      ctx.pitch({ x: 290, y: 150 });
    } else as.after(lineg);
  }
  function pitch(role: IVec2) {
    rolev2 = JSON.parse(JSON.stringify(role));
  }
  return {
    action,
    isPathfn,
    transtionform,
    pitch,
  };
}
